<script setup lang='ts'>
import { ref } from 'vue';

const loading = ref(true)

interface IList {
  imgUrl: string,
  name: string
}

const lists = ref<IList[]>([])

setTimeout(() => {

  loading.value = false
  lists.value = [
    {
      imgUrl:
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      name: 'Deer',
    },
    {
      imgUrl:
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
      name: 'Horse',
    },
    {
      imgUrl:
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      name: 'Mountain Lion',
    },
  ]
}, 3000)


</script>

<template>
  <div class='vt-view__container'>
    <h3 class="vt-view__row-title">
      基本用法，rows 默认3，会额外再最前面添加一条 宽度为33%的线条。
    </h3>
    <div class="vt-view__row">
      <vt-skeleton :rows="4"></vt-skeleton>
    </div>
    <div class="vt-view__row" style="--vt-skeleton-circle-size: 100px">
      <vt-skeleton>
        <template #template>
          <vt-skeleton-item variant="circle" />
        </template>
      </vt-skeleton>
    </div>

    <h3 class="vt-view__row-title">
      自定义样式
    </h3>
    <div class="vt-view__row">
      <vt-skeleton style="width: 240px;">

        <template #template>
          <vt-skeleton-item variant="image" style="width: 240px; height: 240px" />
          <vt-skeleton-item variant="h3" style="width: 50%;margin-top: 16px;" />
          <div style="display: flex;justify-content: space-between;margin-top: 16px;">
            <vt-skeleton-item variant="text" style="width: 50%" />
            <vt-skeleton-item variant="text" style="width: 20%" />
          </div>
        </template>
      </vt-skeleton>
    </div>

    <h3 class=" vt-view__row-title">
      渲染真实DOM
    </h3>
    <div class="vt-view__row" style="--vt-skeleton-circle-size: 100px">
      <vt-skeleton :loading="loading">
        <!-- skeleton -->

        <template #template>
          <vt-skeleton-item variant="h3" />
        </template>
        <!-- 真实 Dom -->

        <template #default>
          <h3>this is h3 title</h3>
        </template>
      </vt-skeleton>
    </div>

    <h3 class="vt-view__row-title">渲染多条数据</h3>
    <div class="vt-view__row">
      <vt-skeleton :loading="loading" :count="3">
        <!-- skeleton -->

        <template #template>
          <vt-skeleton-item variant="image" style="width: 240px; height: 240px" />
          <vt-skeleton-item variant="h3" style="width: 50%;margin-top: 16px;" />
          <div style="display: flex;justify-content: space-between;margin-top: 16px;">
            <vt-skeleton-item variant="text" style="width: 50%" />
            <vt-skeleton-item variant="text" style="width: 20%" />
          </div>
        </template>
        <!-- 真实 Dom -->

        <template #default>
          <div class="warpper" style="display: flex; justify-content: space-around;">
            <div class="box" v-for="(list, index) in lists" :key="index">
              <img style="width: 200px; height: 200px;" :src="list.imgUrl">
              <p>{{ list.name }}</p>
            </div>
          </div>
        </template>
      </vt-skeleton>
    </div>

  </div>
</template>

<style scoped lang='scss'></style>